<template>
  <div>
    <nip-table
      :columns="columns"
      :data="data"
      v-on:onView="onViewClick"
      v-on:onEdit="onEditClick"
      v-on:onDelete="onDeleteClick"/>
  </div>
</template>

<script>
  import NipTable from '@/components/service/NipTable'

  const columns = [{
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    slots: {title: 'customTitle'},
    scopedSlots: {customRender: 'name'},
  }, {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  }, {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  }, {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
    scopedSlots: {customRender: 'tags'},
  }, {
    title: '操作',
    key: 'action',
    width: 150,
    fixed: 'right',
    scopedSlots: {customRender: 'action'},
  }];

  const data = [{
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  }, {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  }, {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  }];
  export default {
    name: "One",
    components: {
      NipTable
    },
    data() {
      return {
        data,
        columns,
      }
    },
    methods: {
      onViewClick(id) {
        console.log("onViewClick: " + id);
      },
      onEditClick(id) {
        console.log("onEditClick: " + id)
      },
      onDeleteClick(id) {
        console.log("onDeleteClick: " + id)
      },
    }
  }
</script>

<style scoped>

</style>
